<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<text style="font-size: .9em;" slot="content">2109年秋季学期八年级期末考试各班质量跟</text>
		</cu-custom>
		<a-fixed :height="40">
			<view class="lables">
				<text>任课老师：马化腾</text>
				<text>等分老师：马玉</text>
			</view>
		</a-fixed>
		<a-fixed :height="40">
			<a-tabs @click="inquire" :row="tabs2.length" type="border" :value="tabs2">
				<template #filter="{row,index}">
					<text style="color: #000000;">筛选</text>
					<text class="iconfont icon-shaixuan"></text>
				</template>
			</a-tabs>
		</a-fixed>
		<a-scroll :request="get" ref="aScroll">
			<template #item="{row:x,index}">
				<a-list :hideIcon="true" :value="x">
					<template #top-right>
						<view class="tui-msg-time">{{x.minute}}</view>
					</template>
					<template #bottom-right>
						<text class="grade" :class="x.grade">{{x.grade}}</text>
					</template>
				</a-list>
			</template>
		</a-scroll>
		<!--右抽屉-->
		<uni-drawer ref="drawer" mode="right" :width="300">
			<y-form :keys="columns" v-model="info" @submit="submit" />
		</uni-drawer>
	</view>
</template>

<script>
	import yForm from "@/y-ui/y-form/y-form.vue";
	export default {
		components: {
			yForm
		},
		data() {
			return {
				tabs2: [{
					id: '123',
					name: "按学号"
				}, {
					name: "按姓名"
				}, {
					name: "按成绩"
				}, {
					disabled: true,
					slot: "filter"
				}],
				info: {}
			}
		},
		computed: {
			columns() {
				return [{
					type: 'yPicker',
					key: '1',
					lable: '学期：',
					placeholder: '请选择',
					range: this.tabs2,
					rangeKey: 'name',
					valueKey: 'id',
					rules: {
						rule: ['required'],
						msg: ['请选择']
					}
				}, {
					type: 'yPicker',
					key: '2',
					lable: '考试：',
					placeholder: '请选择',
					range: [],
					rangeKey: 'name',
					valueKey: 'id',
					rules: {
						rule: ['required'],
						msg: ['请选择']
					}
				}, {
					type: 'yPicker',
					key: '3',
					lable: '班级：',
					placeholder: '请选择',
					range: [],
					rangeKey: 'name',
					valueKey: 'id',
					rules: {
						rule: ['required'],
						msg: ['请选择']
					}
				}, {
					type: 'yPicker',
					key: '4',
					lable: '科目：',
					placeholder: '请选择',
					range: [],
					rangeKey: 'name',
					valueKey: 'id',
					rules: {
						rule: ['required'],
						msg: ['请选择']
					}
				}];
			}
		},
		methods: {
			async get(parm = {}) {
				return {
					total: 10,
					data: new Array(10).fill({
						name: '学生名字',
						sonTitle: '学号',
						minute:'98分',
						grade:'B',
						//学生头像
						img: ''
					})
				}
				return this.$http.post('', {
					...parm,
					...this.info
				}).then(res => {
					return {
						total: res.totalSize,
						data: []
					}
				});
			},
			submit() {
				this.$refs.drawer.close();
				this.$refs.aScroll.get(true);
			},
			inquire(e) {
				if (e.disabled) {
					this.$refs.drawer.open();
					return;
				}
				this.info.filterId = e.id;
				this.$refs.aScroll.get(true);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.lables {
		background-color: #fff;
		font-size: 12px;

		text {
			display: inline-block;
			margin: 7px;
			border-radius: 999px;
			border: 1px solid rgba(0, 0, 0, .4);
			padding: 0 .5em;
			line-height: 26px;
			box-sizing: border-box;
		}
	}

	.tui-msg-time {
		width: 100%;
		font-size: 34rpx;
		line-height: 34rpx;
		color: #ff0000;
	}

	.grade {
		font-size: 34rpx;
		width: 1.6em;
		height: 1.6em;
		line-height: 1.6em;
		vertical-align: middle;
		text-align: center;
		background-color: #555555;
		color: #fff;
		border-radius: 50%;
		margin-top: .2em;

		&.A {
			background-color: orange;
		}

		&.B {
			background-color: purple;
		}

		&.C {
			background-color: blue;
		}
	}
</style>
